---
title: useClipboard
package: '@chakra-ui/hooks'
description:
  'useClipboard is a custom hook that handles copying content to clipboard.'
---

`useClipboard` is a custom hook that handles copying content to clipboard.

## Arguments

The `useClipboard` hook takes the following arguments:

| Name               | Type                 | Required | Description                                                                                                                                                                      |
| ------------------ | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`             | `string`             | `true`   | The text or value that is to be copied.                                                                                                                                          |
| `optionsOrTimeout` | `number` or `object` | `false`  | The timeout as a `number` or an `object` containing 2 properties: `timeout` and `format` for the MIME type. The timeout is measured in milliseconds and has a default of 1500ms. |

## Return value

The `useClipboard` hook returns an object with the following fields:

| Name        | Type       | Default | Description                                                                                                                                                                       |
| ----------- | ---------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`     | `string`   |         | The copied value.                                                                                                                                                                 |
| `onCopy`    | `function` |         | Callback function to copy content.                                                                                                                                                |
| `hasCopied` | `boolean`  | `false` | If `true`, the content has been copied within the last `timeout` milliseconds. That is, it is set to true right after `onCopy` is called, and `false` after `timeout` has passed. |

## Import

```js
import { useClipboard } from '@chakra-ui/react'
```

## Usage

```jsx
function Example() {
  const [value, setValue] = React.useState('Hello world')
  const { hasCopied, onCopy } = useClipboard(value)

  return (
    <>
      <Flex mb={2}>
        <Input value={value} isReadOnly placeholder='Welcome' />
        <Button onClick={onCopy} ml={2}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>
      <Editable placeholder='Paste here'>
        <EditablePreview width='100%' />
        <EditableInput />
      </Editable>
    </>
  )
}
```
